<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MdiWin Demo - edit</title>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/data/yqwin.min" cache="false"></uieip>
</head>

<body>
    <h1>PropGrid</h1>
    <table id="pg" style="width:300px"></table>
    <button onclick="group();">group</button>

    <script>
        $(function () {
            var data = {
                "rows": [
                    { "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "textbox" },
                    { "name": "Address", "value": "", "group": "ID Settings", "editor": "text" },
                    { "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" },
                    {
                        "name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": {
                            "type": "validatebox",
                            "options": {
                                "validType": "email"
                            }
                        }
                    },
                    { "name": "my-text", "value": "123-456-7890", "group": "Marketing Settings", "editor": "my_text" },
                ]
            };


            $('#pg').propertygrid({
                columns: [[
                    {
                        field: 'name', title: '名称', width: 80 
                    },{
                        field: 'value', title: '值', width: 150 
                    }
                ]],
                width: 500,
                //url: 'get_data.php',
                showGroup: true,
                groupField:"group",
                // groupFormatter:function(group,rows){
                //     console.log(group,rows);  
                // },
                scrollbarSize: 0
            });

            $('#pg').propertygrid("loadData", data);


            // var opt = {
            //     ajaxUrl: "_db.html",
            //     dbname: "yqbase",                //数据库
            //     tbname: "",                       //表
            //     tempno: "-1"
            // };

            // $.yqTbTitle(opt, function (res) {
            //     console.log("$.yqTbTitle", res);
            //     if (res.error == 0) {
            //         var titles = $.yqFmUiTitle(res.titles);
            //         console.log("titles", titles);
            //     }
            // })
        });

        function group() {
            var gg = $('#pg').propertygrid("groups");
            console.log("gg", gg);
            var rows = $('#pg').propertygrid("getRows");
            console.log("getRows", rows);
        }


        function check() {
            window.parent.$MidWin.yqFormMdi("editwin", {
                id: "",
                title: 'edit',
                openmore: true,
                content: '<button onclick="addmenu();">menu</button><button onclick="addedit();">edir</button>',
                url: "edit.html",
                closable: true,
            })
        }


        $.extend($.fn.datagrid.defaults.editors, {
        my_text: {
            init: function(container, options){
                var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
                return input;
            },
            destroy: function(target){
                $(target).remove();
            },
            getValue: function(target){
                return $(target).val();
            },
            setValue: function(target, value){
                $(target).val(value);
            },
            resize: function(target, width){
                $(target)._outerWidth(width);
            }
        }
    });
    </script>
</body>

</html>